<!--
 * @Description:
 * @Date: 2023-12-20 14:19:12
 * @LastEditTime: 2025-08-08 15:01:04
-->
<template>
  <div id="gridOne" style="width: 100%;height: 100%;" ref="gridOne" />
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/shine"); // echarts theme
import resize from "../mixins/resize";

export default {
  mixins: [resize],
  props: {
    chartData: {
      type: Array,
      required: false,
      default: []
    },
  },
  watch: {
    chartData: {
      deep: true,
      immediate: true,
      handler: function (val) {
        this.$nextTick(() => {

          this.initChart(val);
        });
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.initChart();
    // });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart(data) {

      if (!this.chart) {
        this.chart = echarts.init(this.$refs.gridOne, "macarons");
      }
      const CubeLeft = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c0 = [shape.x, shape.y];
          const c1 = [shape.x - 9, shape.y - 9];
          const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9];
          const c3 = [xAxisPoint[0], xAxisPoint[1]];
          ctx
            .moveTo(c0[0], c0[1])
            .lineTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .closePath();
        },
      });
      const CubeRight = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c1 = [shape.x, shape.y];
          const c2 = [xAxisPoint[0], xAxisPoint[1]];
          const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9];
          const c4 = [shape.x + 18, shape.y - 9];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });
      const CubeTop = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x, shape.y];
          const c2 = [shape.x + 18, shape.y - 9];
          const c3 = [shape.x + 9, shape.y - 18];
          const c4 = [shape.x - 9, shape.y - 9];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });
      echarts.graphic.registerShape("CubeLeft", CubeLeft);
      echarts.graphic.registerShape("CubeRight", CubeRight);
      echarts.graphic.registerShape("CubeTop", CubeTop);
      const MAX = data.map(res => res.num)
      this.chart &&
        this.chart.setOption(
          {
            backgroundColor: "#010d3a",

            grid: {
              left: 0,
              right: 0,
              bottom: 0,
              top: 20,
              containLabel: true,
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              textStyle: {
                fontSize: 18 // 设置字体大小为14px
              }
            },
            xAxis: {
              type: "category",
              data: data.map(res => res.name),
              axisTick: {
                show: false,
                length: 9,
                alignWithLabel: true,
                lineStyle: {
                  color: "#7DFFFD",
                },
              },
              axisLabel: {
                interval: 0,
                textStyle: {
                  color: "#00F6FF",
                  fontSize: 14,
                  fontWeight: 'bold'
                },
                formatter: function (value) {
                  value = value.slice(0, 5)
                  var ret = "";//拼接加\n返回的类目项
                  var maxLength = 2;//每项显示文字个数
                  var valLength = value.length;//X轴类目项的文字个数
                  var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                  if (rowN > 1)//如果类目项的文字大于3,
                  {
                    for (var i = 0; i < rowN; i++) {
                      var temp = "";//每次截取的字符串
                      var start = i * maxLength;//开始截取的位置
                      var end = start + maxLength;//结束截取的位置
                      //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                      temp = value.substring(start, end) + "\n";
                      ret += temp; //凭借最终的字符串
                    }
                    return ret;
                  }
                  else {
                    return value;
                  }
                }
              }
            },
            yAxis: {
              type: "value",
              min: 0,
              splitLine: {
                show: false,
              },

              axisLabel: {
                fontSize: 12,
              },
              boundaryGap: ["20%", "20%"],
            },
            series: [
              {

                type: "custom",
                renderItem: (params, api) => {
                  const location = api.coord([api.value(0), api.value(1)]);
                  return {
                    type: "group",
                    children: [
                      {
                        type: "CubeLeft",
                        shape: {
                          api,
                          xValue: api.value(0),
                          yValue: api.value(1),
                          x: location[0],
                          y: location[1],
                          xAxisPoint: api.coord([api.value(0), 0]),
                        },
                        style: {
                          fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                              offset: 0,
                              color: "#3B80E2",
                            },
                            {
                              offset: 1,
                              color: "#49BEE5",
                            },
                          ]),
                        },
                      },
                      {
                        type: "CubeRight",
                        shape: {
                          api,
                          xValue: api.value(0),
                          yValue: api.value(1),
                          x: location[0],
                          y: location[1],
                          xAxisPoint: api.coord([api.value(0), 0]),
                        },
                        style: {
                          fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                              offset: 0,
                              color: "#3B80E2",
                            },
                            {
                              offset: 1,
                              color: "#49BEE5",
                            },
                          ]),
                        },
                      },
                      {
                        type: "CubeTop",
                        shape: {
                          api,
                          xValue: api.value(0),
                          yValue: api.value(1),
                          x: location[0],
                          y: location[1],
                          xAxisPoint: api.coord([api.value(0), 0]),
                        },
                        style: {
                          fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                              offset: 0,
                              color: "#3B80E2",
                            },
                            {
                              offset: 1,
                              color: "#49BEE5",
                            },
                          ]),
                        },
                      },
                    ],
                  };
                },
                data: MAX,
              },
              {
                type: "bar",
                tooltip: {
                  show: false
                },
                label: {
                  normal: {
                    show: true,
                    position: "top",

                    fontSize: 16,
                    color: "#fff",
                    offset: [4, -25],
                  },
                },
                itemStyle: {
                  color: "transparent",
                },
                data: MAX,
              },

            ],
          }
        );
    },
  },
};
</script>
<style lang="scss" scoped>
.pie2 {
  width: 100%;
  height: 100%;
}
</style>
